<template>
	<!--证件认证+图片上传-->
	<view class="com-content">
		<view class="com-box">
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>企业名称：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.company_name" placeholder="请输入"
					 placeholder-style="color:#999"></input>
			</view>
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>法人名称：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.user_name" placeholder="请输入"
					 placeholder-style="color:#999"></input>
			</view>
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>联系电话：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.mobile" placeholder="请输入"
					 placeholder-style="color:#999"></input>
			</view>
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>统一信用代码：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.code" placeholder="请输入"
					 placeholder-style="color:#999"></input>
			</view>
			<view class="input-row" :style="{height:rHeight + 'px'}">
				<view class="input-row-t"><text class="required" v-if="required">*</text>行业：</view>
				<input class="input-row-w" :style="{height:rHeight + 'px'}" type="text" v-model="params.industry" placeholder="请输入"
					 placeholder-style="color:#999"></input>
			</view>
			
			<view class="input-row-img">
				<view class="input-row-t"><text class="required" v-if="required">*</text>相关证件：</view>
				<!-- <image-upload :max="1" name="file" :chooseNum="1" v-model="params.img"
					@chooseSuccess="ChooseSuccess" @imgDelete="imgDelete">
				</image-upload> v-model="params.imgs"-->
				<template v-if="type==='add'">
					<uni-file-picker limit="1" fileMediatype="image" mode="grid"
						:image-styles="imageStyles" @select="select" @progress="progress" @success="success"
						@fail="fail" />
				</template>
				<template v-else-if="type==='edit'">
					<template v-if="params.img!==''">
						<view class="img_box">
							<image class="img" :src="params.img" mode="aspectFill"></image>
							<view class="icon-del-box" @click.stop="delFile">
								<view class="icon-del"></view>
								<view class="icon-del rotate"></view>
							</view>
						</view>
					</template>
					<template v-else>
						<uni-file-picker limit="1" fileMediatype="image" mode="grid"
							:image-styles="imageStyles" @select="select" @progress="progress" @success="success"
							@fail="fail" />
					</template>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	//import imageUpload from '@/components/image-upload/image-upload.vue';
	import uniFilePicker from '@/components/uni-file-picker/uni-file-picker.vue';
	export default {
		name: "record_count",
		components: {
			uniFilePicker, //imageUpload
		},
		props: {
			type: {
				type: String,
				default: 'add'
			},
			params: {
				type: Object,
				default () {
					return []
				}
			},
			required:{
				type:Boolean,
				default:false
			},
			rHeight:{
				type:String,
				default:'55'
			}
		},
		data() {
			return {
				imageStyles: {
					width: 110,
					height: 110,
					border: {
						color: "#f5f5f5",
						width: 1,
						style: 'dashed',
						radius: '2px'
					}
				}
			}
		},
		methods: {
			delFile() {
				if (this.type === 'edit') {
					this.$emit('delFile')
				}
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				this.$emit('select', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
				this.$emit('progress', e)
			},
			
			// 上传成功
			success(e) {
				console.log('上传成功')
				this.$emit('success', e)
			},
			
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
				this.$emit('fail', e)
			},
			ChooseSuccess(tempFilePaths) { //选择图片返回
				this.$emit('ChooseSuccess', tempFilePaths)
			},
			imgDelete() {
				this.$emit('imgDelete')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.required{
		color: #FE5252;
		font-size: 28rpx;
	}
	
	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.magin_l {
		margin-left: 25rpx;
	}

	.color-red {
		color: red !important;
	}

	.font-small {
		font-size: 24rpx !important;
	}

	.com-content {
		display: flex;
		width: 100%;
		margin-bottom: 30rpx;

		.com-box {
			display: flex;
			flex-direction: column;
			width: calc(100% - 80rpx);
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			.input-row {
				display: flex;
				align-items: center;
				width: 100%;
				flex-direction: row;
				border-bottom: 1rpx solid #f5f5f5;
				background: $uni-bg-box-color;
						
				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					color: $font-color-3;
					font-size: 28rpx;
				}
				.input-row-t{
					font-size: 32rpx;
					color: #333333;
				}
			}
			.input-row-img {
				margin-top: 30rpx;
				display: flex;
				flex: 1;
				width: 100%;
				flex-direction: column;
				background: $uni-bg-box-color;
				.img_box {
					position: relative;
					background: #F5F5F5;
					width: 200rpx;
					height: 200rpx;
				
					.img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 4rpx;
					}
				
					.rotate {
						position: absolute;
						transform: rotate(90deg);
					}
				
					.icon-del-box {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 5px;
						right: 5px;
						height: 26px;
						width: 26px;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.5);
						z-index: 2;
						transform: rotate(-45deg);
					}
				
					.icon-del {
						width: 15px;
						height: 2px;
						background-color: #fff;
						border-radius: 2px;
					}
				}
						
				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					color: $font-color-3;
					font-size: 28rpx;
				}
				.input-row-t{
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
